<template>
  <div>
    <el-table :header-cell-style="{background:'#fcfcfc',color:'#909399',fontSize:'14px',fontWeight:'normal'}" :data="dataset" style="width: 100%">
      <el-table-column prop="title" label="招聘会内容">
        <template slot-scope='scope'>
          <div class="jobFair_con">
            <a class="title" :href="scope.row.jobfair_url" target="_blank">{{scope.row.title}}</a>
            <p class="time">举办时间：{{scope.row.holddate_start | timeFilter}} 至 {{scope.row.holddate_end | timeFilter}}</p>
            <p class="place">举办地点：{{scope.row.address}}</p>
            <p :class="'reserve_status status'+statusVal(scope.row)">{{statusText(scope.row)}}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="120">
        <template slot-scope='scope'>
          <el-button type="primary" size="mini" v-if="scope.row.predetermined==1"><a class="jobfairUrl" :href="scope.row.jobfair_url" target="_blank">我要参会</a></el-button>
          <el-button type="info" size="mini" disabled v-if="scope.row.predetermined==0">报名未开始</el-button>
          <el-button type="info" size="mini" disabled v-if="scope.row.predetermined==2">报名已结束</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
			:total="total"
			:current-page="params.page"
			:page-size="params.pagesize"
			@handleCurrentChange="doSearch"
		></pagination>
  </div>
</template>
<script>
import { parseTime } from '@/utils/index'
import http from '@/utils/http'
import api from '@/api'
  export default{
		filters: {
			timeFilter (timestamp) {
        return parseTime(timestamp, '{y}-{m}-{d}')
      }
		},
    data(){
      return{
				listLoading:false,
        dataset: [],
        total:0,
				params: {
					page: 1,
					pagesize: 10
        }
      }
    },
		created(){
			this.fetchData()
		},
		methods:{
			doSearch:function(page) {
				this.params.page = page
				this.fetchData()
			},
      fetchData:function() {
        http.get(api.company_jobfair, this.params).then(res => {
						this.dataset = [...res.data.items],
            this.listLoading = false,
            this.total = res.data.total
				}).catch(() => {})
      },
      statusVal:function(jobfair){
        return (this.$store.state.LoginOrNot && jobfair.is_reserve == 1) ? 3 : jobfair.predetermined;
      },
      statusText:function(jobfair){
        var str = '';
        switch (jobfair.predetermined) {
          case 0:
            str = '本场招聘会报名未开始，将在 ' + parseTime(jobfair.predetermined_start, '{y}-{m}-{d}') + ' 开始';
            break;
          case 1:
            if(!this.$store.state.LoginOrNot || jobfair.is_reserve != 1){
              str = '本场招聘会正火热报名中，请从速报名';
            }else if(jobfair.reserve_status == 1) {
              str = '您已预定展位号' + jobfair.position + '，请按时参会';
            }else if(jobfair.reserve_status == 3){
              const reason = jobfair.reason!=='' ? jobfair.reason : '无'
              str = '您预定的展位号' + jobfair.position + '，审核未通过（'+ reason +'）';
            }else{
              str = '您已预定展位号' + jobfair.position + '，请等待管理员审核';
            }
            break;
          case 2:
            str = '本场招聘会已停止报名，请及时关注最新招聘会';
            break;
        }
        return str
      }
    }
  }
</script>

<style lang="scss" scoped>
  .jobFair_con{
    margin:10px 0 10px 0px;
  }
.title{
    color: #333333;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 14px;
    display: block;
}
.time , .place{
  color: #666666;
  font-size: 14px;
}
.jobfairUrl{
  color:#fff
}
.jobfairUrl:hover{
  text-decoration: none;
}
.reserve_status{
	color:#666666;
	font-size: 14px;
	margin-bottom: 14px;
}
.reserve_status.status0{color:#ff6600}
.reserve_status.status1{color:#ff6363}
.reserve_status.status2{color:#8c8c8c}
.reserve_status.status3{color:#1787fb}
</style>
